<template>
<view class="card">
  <block v-for="(item, index) in card" :key="index">
      <view :data-index="index" :data-item="item" @click="openCard" :class="'project item' + index + ' ' + (item.isMove ? 'ani' : '') + ' ' + (item.status==1 ? 'flip' : '')">
        <image class="front" src="../card.png"></image>
        <view class="back">
           <image :src="item.img"></image>
        </view>
    </view>
  </block>
</view>
</template>

<script>
function runAsync(time) {
  return new Promise(function (resolve, reject) {
    const timer = setTimeout(function () {
      resolve();
      clearTimeout(timer);
    }, time);
  });
}

export default {
  data() {
    return {
      move: ''
    };
  },

  components: {},
  props: {
    // 九宫格卡片
    card: {
      type: Array,
      default: new Array()
    }
  },
  methods: {
    start(callback) {
      const {
        card,
        mode
      } = this;
      runAsync(100).then(() => {
        // 延迟100毫秒翻转第一排牌面
        for (let i = 0; i < 3; i++) {
          card[i].status = 1;
        }
	
		this.card = card;
        return runAsync(200);
      }).then(() => {
        // 延迟200毫秒翻转第二排牌面
        for (let i = 3; i < 6; i++) {
          card[i].status = 1;
        }
		this.card = card;
        return runAsync(200);
      }).then(() => {
        // 延迟200毫秒翻转第三排牌面
        for (let i = 6; i <= 8; i++) {
          card[i].status = 1;
        }

        this.card = card;
        return runAsync(800);
      }).then(() => {
        // 将所有背面朝上
        for (let i = 0; i < 9; i++) {
          card[i].status = 0;
        }

        this.card = card;
        return runAsync(1000);
      }).then(() => {
        // 洗牌动画
        for (let i = 0; i < 9; i++) {
          runAsync(i * 40).then(() => {
            card[i].isMove = true;
            this.card = card;
            return runAsync(i * 40 + 1200);
          }).then(() => {
            card[i].isMove = false;
            this.card = card;
            return runAsync(1600);
          }).then(() => {
            // 结束后回调
            if (typeof callback === 'function') {
              callback();
            }
          });
        }
      });
    },

    // 点击打开单个卡片，开奖
    openCard(event) {
      const {
        item,
        index
      } = event.currentTarget.dataset; // 触发父组件方法

      this.$emit('open', {
        detail: {
          item,
          index
        }
      });
    }
  }
};
</script>
<style>
.card {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 600rpx;
  height: 780rpx
}
.card .project {
  position: absolute;
  float: left;
  width: 200rpx;
  height: 260rpx;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  transition: all 1s cubic-bezier(.68,-.22,.265,1.22)
}
.card .project image {
  width: 180rpx;
  height: 240rpx
}
.card .project .back,
.card .project .front {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: all 1s cubic-bezier(.68,-.22,.265,1.22);
  position: absolute;
  left: 10rpx;
  top: 10rpx;
  width: 180rpx;
  height: 240rpx
}
.card .project .front {
  transform: rotateY(0)
}
.card .project .back {
  transform: rotateY(180deg)
}
.card .project.flip .back {
  transform: rotateY(0)
}
.card .project.flip .front {
  transform: rotateY(180deg)
}
.card .ani {
  top: 260rpx!important;
  left: 200rpx!important
}
.card .item0 {
  top: 0;
  left: 0
}
.card .item1 {
  top: 0;
  left: 200rpx
}
.card .item2 {
  top: 0;
  left: 400rpx
}
.card .item3 {
  top: 260rpx;
  left: 0
}
.card .item4 {
  top: 260rpx;
  left: 200rpx
}
.card .item5 {
  top: 260rpx;
  left: 400rpx
}
.card .item6 {
  top: 520rpx;
  left: 0
}
.card .item7 {
  top: 520rpx;
  left: 200rpx
}
.card .item8 {
  top: 520rpx;
  left: 400rpx
}
</style>